<!doctype html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
    <title>H5网页录音</title>
    <meta content="H5网页录音" name="Keywords">
    <meta content="H5网页录音" name="Description">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/asset/ui.css">
    <style>
        .demo-container {
        position: relative;
        overflow: hidden;
    }

    .rect {
        border: 2px solid #a64ceb;
        left: -1000px;
        position: absolute;
        top: -1000px;
    }

    .demo {
        position: absolute;
        width: 640px;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        padding: 20px;
        border: 1px solid #ccc;
        border-radius: 6px;
        z-index: 9;
    }

    .demo li {
        display: inline-block;
        width: 8em;
        height: 8em;
        border: 1px solid #ccc;
        border-radius: 4px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        cursor: pointer;
    }

    .foot {
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #333;
        padding: 24px;
        overflow: hidden;
        color: #999;
        font-size: 14px;
        text-align: center;
    }
    </style>
    <script>
        var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?f10103677155b485824f29def715eb5d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
    </script>
</head>

<body>
    <h1 class="tc m"><a href="//refined-x.com" title="前端路上">H5网页录音</a></h1>
    <div class="wrap">
        <audio controls autoplay></audio>
        <div>
            <input onclick="startRecording()" id="actbtn" type="button" value="录音" />
            <input onclick="playRecording()" id="playbtn" type="button" value="播放" />
        </div>
    </div>
    <footer class="foot">
        <p>© 2017 - 3017  Author
            <a href="//refined-x.com/" target="_blank">雅X共赏</a>
        </p>
    </footer>
    <script type="text/javascript" src="/asset/recorder.js"></script>
    <script type="text/javascript">
    var recorder;
    var status;
    var actbtn = document.getElementById('actbtn');
    var playbtn = document.getElementById('playbtn')

    var audio = document.querySelector('audio');

    function startRecording() {
        if(status){
            actbtn.value = '录音'
            stopRecording();
        }else{
            status = true;
            playbtn.disabled = true
            actbtn.value = '停止'
            HZRecorder.get(function(rec) {
                recorder = rec;
                recorder.start();
            }); 
        }
        
    }

    function stopRecording() {
        status = false
        playbtn.disabled = false
        recorder.stop();
    }

    function playRecording() {
        recorder.play(audio);
    }

    </script>
</body>

</html>